<template>
  <div class="bar">
    <div class="title">
      <span>订单进度</span>
    </div>
    <a-row :gutter="[8, 8]">
      <a-col :span="24" class="custom">
        <a-steps>
          <a-step status="finish" v-for="(item, index) in pLists" :key="index">
            <span slot="title" class="process-title">{{ item.title }}</span>
            <a-icon slot="icon" :type="item.icon" />
            <div slot="description" class="finish-desc">
              <div>
                <div>
                  <span>{{ item.desc1 }}</span>
                </div>
                <div>
                  <span>{{ item.desc2 }}</span>
                </div>
                <div>
                  <span>{{ item.desc3 }}</span>
                </div>
                <div>
                  <span>{{ item.desc4 }}</span>
                </div>
              </div>

              <div v-for="(item1, index1) in item.data" :key="index1">
                <div>
                  <span>{{ item1.desc }}</span>
                </div>
                <div class="imgBox">
                  <div
                    class="imgWrap"
                    style="width: 70px;height: 70px;"
                    v-for="(item2, index2) in item1.urls"
                    :key="index2"
                    @click="imgHandle(item2)"
                  >
                    <img
                      :src="item2"
                      alt=""
                      style="width: 100%;height: 100%;"
                    />
                  </div>
                </div>

                <div>
                  <span>{{ item1.time }}</span>
                </div>
              </div>
              <div
                class="addRepairInfo"
                v-show="isAddRepairInfoBtn(item.status)"
              >
                <span @click="addRepairInfo">+添加维修信息</span>
              </div>
            </div>
          </a-step>
        </a-steps>
      </a-col>
    </a-row>
    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
      <img style="width: 100%" :src="previewImage" />
    </a-modal>

    <a-modal
      v-model="isAddRepairInfo"
      title="添加维修信息"
      okText="确定"
      cancelText="取消"
      @ok="addRepairInfoOkBtn"
      @cancel="addRepairInfoCloseBtn"
    >
      <a-form-model
        ref="addRepairInfoForm"
        :model="addRepairInfoForm"
        :rules="addRepairInfoRules"
        v-bind="modelFormlayout"
      >
        <a-form-model-item label="维修内容" prop="repairContent">
          <a-input v-model="addRepairInfoForm.repairContent" allow-clear />
        </a-form-model-item>
        <ImageList ref="imageList" :config="imageListConfig"></ImageList>
      </a-form-model>
    </a-modal>
  </div>
</template>
<script>
import api from "@/server/userConfig";
import { getRoleId, formatPictureIds } from "@/unit/tool";
import { WarrantyType, RepairResultType } from "@/unit/constantValue";
import { AddRepairInfoRules } from "./rulesConfig";
import ImageList from "@/components/upload/imageList";

const ResultType = RepairResultType.map(item => item.label);

function buildLists(lists) {
  let _lists = [];
  let newLists = [];
  lists.forEach((item, index) => {
    _lists.push(item);
  });

  let delStatusAry = [{ status: 2 }, { status: 8 }];

  delStatusAry.forEach((item, index) => {
    let count = 0;
    _lists.forEach((item1, index2) => {
      if (item1.status == item.status) {
        if (item.status == 2) {
          let { operator, username } = item1;
          item.assignOperator = operator;
          item.assignUsername = username;
        } else {
          item.data = item1.data;
        }
      }
      item.count = count + 1;
    });
  });

  console.log(delStatusAry);

  delStatusAry.forEach((item, index) => {
    _lists.forEach((item1, index2) => {
      if (item1.status == item.status) {
        delete _lists[index2];
      }
    });
  });

  _lists.forEach((item, index) => {
    if (item != undefined) {
      delStatusAry.forEach((item1, index2) => {
        if (item.status == 1 && item1.status == 2) {
          let { assignOperator, assignUsername } = item1;
          item.assignOperator = assignOperator;
          item.assignUsername = assignUsername;
        } else if (item.status == 7 && item1.status == 8) {
          let { data } = item1;
          item.data = data;
        }
      });
      newLists.push(item);
    }
  });

  newLists = newLists.sort((a, b) => {
    return a.status - b.status;
  });
  console.log(newLists);
  return newLists;
}

function formatStep(item) {
  let { status } = item;
  switch (item.status) {
    case 1:
      return {
        status,
        title: "返厂中",
        icon: "user",
        desc1: `申请人: ${item.operator} ${item.username}`,
        desc2: `指派工程师: ${item.assignOperator} ${item.assignUsername}`,
        desc3: item.time
      };
    // case 2:
    //   return {
    //     title: "返厂中",
    //     icon: "right-circle",
    //     status: item.status,
    //     name: item.operator,
    //     time: item.time
    //   };
    case 3:
      return {
        status,
        title: "已收货",
        icon: "appstore",
        desc1: `收货人: ${item.operator} ${item.username}`,
        desc2: item.time
      };
    case 4:
      return {
        status,
        title: "已指派",
        icon: "right",
        desc1: `指派工程师: ${item.operator} ${item.username}`,
        desc2: item.time
      };
    case 5:
      return {
        status,
        title: "维修收货",
        icon: "medicine-box",
        desc1: `收货人: ${item.operator} ${item.username}`,
        desc2: item.time
      };
    case 6:
      return {
        status,
        title: "维修中",
        icon: "tool",
        data: formatRepairRunning(item.data)
      };
    case 7:
      return {
        status,
        title: "维修完成",
        icon: "check",
        desc1: `维修完成: ${item.operator} ${item.username}`,
        desc2: `故障原因: ${item.faultReason}`,
        desc3: `故障细分: ${item.faultSubdivision}`,
        desc4: `备注信息: ${item.reasonRemark || "无信息"}`,
        data: formatRepairFinish(item.data)
      };
    // case 8:
    //   return {
    //     title: "指派返修",
    //     icon: "right-circle",
    //     desc1: `指派工程师: ${item.operator} ${item.username}`,
    //     desc2: item.time
    //   };
    case 10:
      return {
        status,
        title: "返修完成",
        icon: "right-circle",
        desc1: `返修结果: ${ResultType[item.resultType - 1]}`,
        desc2: `备注信息: ${item.resultRemark || "无信息"}`,
        desc3: item.time
      };
    case 100:
      return {
        status,
        title: "废单",
        icon: "stop",
        desc1: `操作人: ${item.operator} ${item.username}`,
        desc2: `备注信息: ${item.wasterRemark || "无信息"}`,
        desc3: item.time
      };
    default:
      break;
  }
}

function formatRepairRunning(lists) {
  let _lists = [];

  _lists = lists.map((item, index) => {
    return formatType(item);
  });

  console.log(_lists);

  return _lists;

  function formatType(item) {
    switch (item.type) {
      case 1:
        return {
          desc: `开始维修: ${item.operator} ${item.username}`,
          time: item.time
        };
      case 2:
        return {
          desc: `指派工程师: ${item.operator} ${item.username}`,
          time: item.time
        };
      case 3:
        return {
          desc: `维修记录: ${item.repairContent}`,
          urls: item.urls,
          time: item.time
        };
      case 4:
        return {
          desc: `确认收货: ${item.operator} ${item.username}`,
          time: item.time
        };
      default:
        break;
    }
  }
}

function formatRepairFinish(lists) {
  let _lists = [];

  _lists = lists.map((item, index) => {
    return {
      desc: `指派工程师: ${item.operator} ${item.username}`,
      time: item.time
    };
  });

  console.log(_lists);

  return _lists;
}

export default {
  name: "RepairProcess",
  components: {
    ImageList
  },
  props: {
    info: Object,
    processLists: Array
  },
  data() {
    return {
      userName: "",
      name: "",
      role: "",
      compId: "",
      pLists: [],
      previewVisible: false,
      previewImage: "",
      modelFormlayout: {
        layout: "horizontal",
        labelAlign: "right",
        hideRequiredMark: true,
        labelCol: { span: 4 },
        wrapperCol: { span: 20 }
      },
      isAddRepairInfo: false,
      addRepairInfoRules: AddRepairInfoRules,
      assignLists: [],
      addRepairInfoForm: {
        repairContent: ""
      },
      imageListConfig: {
        isValid: false,
        type: "upload",
        length: 5,
        apiKey: "uploadRepairContentPicture",
        boxSize: [64, 64]
      }
    };
  },
  computed: {
    isAddRepairInfoBtn() {
      return function(status) {
        return this.info.status == 6 && status == 6;
      };
    }
  },
  watch: {
    processLists: function(newVal, oldVal) {
      let _this = this;

      let lists = buildLists(newVal);

      this.pLists = lists.map((item, index) => {
        return formatStep(item);
      });
    }
  },
  methods: {
    handleCancel() {
      this.previewVisible = false;
    },
    imgHandle(item) {
      this.previewImage = item;
      this.previewVisible = true;
    },
    addRepairInfo() {
      this.isAddRepairInfo = true;
    },
    async addRepairInfoOkBtn() {
      let _this = this;
      let imageListValid = await this.$refs["imageList"].getFormData();
      let pictureIds = formatPictureIds(imageListValid.data);
      _this.$refs["addRepairInfoForm"].validate(valid => {
        if (valid) {
          let { repairId } = _this.info;
          let repairContent = _this.addRepairInfoForm.repairContent;
          _this.addRepairContent({
            repairId,
            username: _this.userName,
            operator: _this.name,
            repairContent,
            pictureIds
          });
        }
      });
    },
    addRepairInfoCloseBtn() {
      let _this = this;
      _this.$refs["addRepairInfoForm"].resetFields();
    },
    // 添加维修信息
    async addRepairContent(params) {
      const res = await api.addRepairContent({ ...params });
      if (res.msgCode === 0) {
        this.$message.success(res.msgDesc);
        this.isAddRepairInfo = false;
        this.$router.go(0);
      } else {
        this.$message.error(res.msgDesc);
      }
    }
  },
  mounted() {
    getRoleId(this);
  }
};
</script>

<style scoped="scoped">
.bar {
  width: 100%;
  background-color: #ffffff;
  border: 1px solid #e8e8e8;
  padding: 16px 16px 16px 16px;
}

.bar > .title {
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: 600;
  color: #1890ff;
  padding: 0px 0px 16px 0px;
}

.itemWrap {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
}

.itemWrap > .label {
  /* min-width: 96px; */
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #373737;
  text-align: left;
}

.itemWrap > .separator {
  padding: 0px 4px;
}

.itemWrap > .content {
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #373737;
  text-align: left;
}

.custom >>> .ant-steps {
  flex-wrap: wrap;
}

.custom >>> .ant-steps-item {
  min-width: 400px;
  flex: none;
}

.custom >>> .ant-steps-item-description {
  min-width: 360px;
}

.imgBox {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
}

.imgBox > .imgWrap {
  padding: 2px 2px;
  margin: 0px 4px;
  border: 1px solid #e5e5e5;
  border-radius: 2px;
  background-color: #ecf2f7;
}

.addRepairInfo {
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 600;
  color: #1890ff;
  border-bottom: 1px solid #1890ff;
  cursor: pointer;
  width: 120px;
  text-align: center;
}
</style>
